<template>

  <div class="register-container">
    <!-- 注册内容 -->
    <div class="register">
      <h3 class="new-user">
        注册新用户
        <span class="go">已有账号? 去 <router-link to="/login">登陆</router-link></span>
      </h3>
      <el-card shadow="always" :body-style="{ padding: '100px 300px', margin: '20px 100px' }" style="margin:40px auto">
        <el-form :model="formData" ref="ruleFormRef" label-width="80px" :inline="false" size="normal" :rules="rules">
          <el-form-item label="手机号 :" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入你的手机号"></el-input>
          </el-form-item>
          <el-form-item label="密码 :" prop="password">
            <el-input v-model="formData.password" placeholder="请输入验证码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码 : " prop="password1">
            <el-input v-model="formData.password1" placeholder="请输入确认密码" type="password"></el-input>
          </el-form-item>
        </el-form>
        <!-- 协议同意 -->
        <div class="controls">
          <input type="checkbox" name="agree" />
          <span> 同意协议并注册</span>
        </div>
        <div class="btn">
          <button class="done" @click.prevent="register">完成注册</button>
        </div>
      </el-card>
    </div>
  </div>

</template>
<script setup lang='ts'>
import { useRouter } from 'vue-router';
import { ElMessage, type FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import userRegisterInfo from '@/store/modules/register'
const userRegisterInfoStore = userRegisterInfo()
const router = useRouter()

const formData = ref({
  phone: '',//手机号
  password: '',//密码
  password1: '',//确认密码
  agree: true  //是否同意协议
})

const ruleFormRef = ref()

// 手机号
const validatePass = (rule: any, value: any, callback: any) => {
  if (/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value)) {
    callback()
  } else {
    callback(new Error('请按照正确格式输入手机号'))
  }
}

// 密码
const password = (rule: any, value: any, callback: any) => {
  if (value == formData.value.password) {
    callback()
  } else {
    callback(new Error('密码不一致'))
  }
}

// 表单验证
const rules = reactive<FormRules>({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: validatePass, trigger: 'blur' }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
  password1: [
    { required: true, message: '确认密码是否一致', trigger: 'blur', },
    { validator: password, trigger: 'blur' }
  ],
})

// 注册
const register = async () => {
  localStorage.setItem("register", JSON.stringify(formData))
  try {
    await userRegisterInfoStore.getUserRegister(formData)
    ruleFormRef.value.validate((a:any, b:any) => {
      if (a) {
        ElMessage({
          type: 'success',
          messaeg: '注册成功'
        })
        router.push({ name: 'Login' })
      }
    })
  } catch (error) {
    ElMessage.error('注册失败')
  }
}

</script>

<style lang='less' scoped>
.register-container {
  height: 700px;

  .register {
    width: 1200px;
    height: 445px;
    margin: 20px auto;

    .new-user {
      background: #ececec;
      margin: 0;
      padding: 6px 15px;
      color: #333;
      border-bottom: 1px solid #dfdfdf;
      font-size: 20.04px;
      line-height: 30.06px;

      .go {
        font-size: 14px;
        float: right;
        color: #e1251b;
      }
    }

    .controls {
      text-align: center;
      position: relative;

      .input {
        vertical-align: middle;

      }

      .error-msg {
        position: absolute;
        top: 100%;
        left: 495px;
        color: red;
      }
    }

    .btn {
      text-align: center;
      line-height: 36px;
      margin: 17px 0 0 55px;

      .done {
        outline: none;
        width: 270px;
        height: 36px;
        background: #e1251b;
        color: #fff !important;
        display: inline-block;
        font-size: 16px;
        border: none;
      }
    }
  }
}
</style>